<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页</title>
    <link rel="stylesheet" href="./周慧分页.css">
</head>

<body>
    <button onclick="addfamily()">增加</button>
    <table border="1">
        <tr>
            <th>头像</th>
            <th>姓</th>
            <th>名</th>
            <th>性别</th>
            <th>生日</th>
            <th>电话</th>
            <th>人生格言</th>
            <th>操作</th>
        </tr>
        <tbody id="tbody"> </tbody>
    </table>
    <!-- 这是增加的弹出框 -->
    <ul class="ul">
        <li>
            <span>姓:</span><input type="text" id="xing">
        </li>
        <li>
            <span>名:</span><input type="text" id="ming">
        </li>
        <li>
            <span>性别:</span>
            <input type="radio" name="gender" id="male" value="1">
            <label for="male">男</label>
            <input type="radio" name="gender" id="female" value="2">
            <label for="female">女</label>
        </li>
        <li>
            <span>生日:</span><input type="date" id="shengri">
        </li>
        <li>
            <span>电话:</span><input type="tel" maxlength="12" id="dianhua" />
        </li>
        <li>
            <span>人生格言:</span>
            <textarea name="" id="geyan" cols="30" rows="5" style="resize: none"></textarea>
        </li>
        <button onclick="cfm()">确定</button>&nbsp;&nbsp;&nbsp;&nbsp;
        <button onclick="bai()">取消</button>
    </ul>
    <!-- 这是修改的弹出框 -->
    <ul class="ul_i">
        <input type="hidden" id="id_i">
        <li>
            <span>姓:</span><input type="text" id="xing_i">
        </li>
        <li>
            <span>名:</span><input type="text" id="ming_i">
        </li>
        <li>
            <span>性别:</span>
            <input type="radio" name="gender_i" id="male" value="1">
            <label for="male">男</label>
            <input type="radio" name="gender_i" id="female" value="2">
            <label for="female">女</label>
        </li>
        <li>
            <span>生日:</span><input type="date" id="shengri_i">
        </li>
        <li>
            <span>电话:</span><input type="tel" maxlength="12" id="dianhua_i" />
        </li>
        <li>
            <span>人生格言:</span>
            <textarea name="" id="geyan_i" cols="30" rows="5" style="resize: none"></textarea>
        </li>
        <button onclick="cfm_i()">确定</button>&nbsp;&nbsp;&nbsp;&nbsp;
        <button onclick="bai_i()">取消</button>
    </ul>
    <!-- 这是查询的弹出框 -->
    <ul class="ul_c">
        <input type="hidden" id="id_c">
        <li>
            <span>姓:</span><input type="text" id="xing_c" readonly>
        </li>
        <li>
            <span>名:</span><input type="text" id="ming_c" readonly>
        </li>
        <li>
            <span>性别:</span>
            <input type="radio" name="gender_c" id="male" value="1" disabled/>
            <label for="male">男</label>
            <input type="radio" name="gender_c" id="female" value="2" disabled/>
            <label for="female">女</label>
        </li>
        <li>
            <span>生日:</span><input type="date" id="shengri_c" readonly>
        </li>
        <li>
            <span>电话:</span><input type="tel" maxlength="12" id="dianhua_c" readonly />
        </li>
        <li>
            <span>人生格言:</span>
            <textarea name="" id="geyan_c" cols="30" rows="5" style="resize: none" readonly></textarea>
        </li>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="cfm_c()">关闭</button>
    </ul>
    <!-- 分页 -->
    <div class="ukpage">
        <span class="spage" onclick="lastpage()">上一页</span>
        <span class="pagetion"></span>
        <span class="xpage" onclick="nextpage()">下一页</span>
    </div>

    <script src="./js/jquery-3.6.0.js"></script>
    <script src="./周慧分页.js"></script>

</body>

</html>